// 搜索文件名称给过滤文本上色
import React from 'react';
import './index.scss';

export default function ColorText(props) {
  const { filterText, name } = props;
  if (!name) {
    return null;
  }
  if (!filterText || name.toLowerCase().indexOf(filterText.toLowerCase()) === -1) {
    return name;
  }
  const index = name.toLowerCase().indexOf(filterText.toLowerCase());
  const { length } = filterText;
  const selectedText = name.slice(index, index + length);
  const nameTextArr = name.split(selectedText);
  return nameTextArr.map((item, i) => {
    return (
      <React.Fragment>
        {i > 0 && <span className="filter-selected-text">{selectedText}</span>}
        <span>{item}</span>
      </React.Fragment>
    );
  });
}
